<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="./node_modules/axios/dist/axios.js"></script> -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- <link rel="stylesheet" href="./iconfont/iconfont.css" /> -->
    <lnk rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./node_modules/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="./css/bot.css" />
    <script src="./node_modules/swiper/swiper-bundle.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
  </head>
  <body>
    <div class="shop" id="shop">
      <h3>{{title}}</h3>
      <header>
        <!-- 搜索框 -->
        <div class="seach">
          <span class="iconfont icon-sousuo"></span>
          <span class="ser">{{search}}</span>
        </div>
      </header>
      <div class="main">
        <!-- 轮播图 -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item,index) in list"
              :key="index.id"
            >
              <img :src="item.imgUrl" alt="" />
            </div>
            <!-- <div class="swiper-slide"><img src="" alt="" /></div>
            <div class="swiper-slide"><img src="" alt="" /></div> -->
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <!-- 字体轮播 -->
        <div class="mes">
          <span class="iconfont icon-shengyin"></span>
          <div>
            <span>{{typeface}}</span>
          </div>
        </div>
        <div class="men">
          <div class="it" v-for="(item,index) in listApp" :key="item.id">
            <div><img :src="item.imgUrl" alt="" /></div>
            <p>{{item.text}}</p>
          </div>
        </div>
        <div class="img">
          <img :src="picture" alt="" />
        </div>
        <div class="gue" v-html="love">{{love}}</div>
        <div class="contentAll">
          <div class="content"  v-for = "(item,index) in allList" :data-index = "item.goods_id">
            <img :src="item.goods_image" alt="" />
            <div class="tx">
              <p class="txone">{{item.goods_name}}</p>
              <p class="txtwo">已售{{item.goods_price_max }}件</p>
              <p class="txthree">
                ￥{{item.line_price_max }}
                <span>￥{{item.line_price_min }}</span>
              </p>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
          <a href=""
            ><div>
              <img src="./img/10001.png" alt="" />
              <p style="color: #fa2209">首页</p>
            </div></a
          >
          <a href="./page/classify.html"
            ><div>
              <img src="./img/10002.png" alt="" />
              <p>分类</p>
            </div></a
          >
          <a href="./page/gwc.html"
            ><div>
              <img src="./img/1003.png" alt="" />
              <p>购物车</p>
            </div></a
          >
          <a href="./page/wode.html"
            ><div>
              <img src="./img/10007.png" alt="" />
              <p>我的</p>
            </div></a
          >
        </div>
      </div>
    </div>
    <!-- <script src="./js/index.js"></script> -->
    <script src="./vue.js"></script>
    <script>
      const shop = new Vue({
        el: '#shop',
        data: {
          title: '',
          search: '',
          list: [],
          typeface: '',
          picture: '',
          listApp: [],
          love: '',
          allList: []
        },
        created() {
          this.appList()
        },
        methods: {
          async appList() {
            const res = await axios.get(
              'http://cba.itlike.com/public/index.php?s=/api/page/detail'
            )
            console.log(res.data.data.pageData.page.params.title)
            this.title = res.data.data.pageData.page.params.title
            // console.log(res)
            // console.log(res.data.data.pageData.items[0].params.placeholder)
            this.search = res.data.data.pageData.items[0].params.placeholder
            this.list = res.data.data.pageData.items[1].data
            var swiper = new Swiper('.mySwiper', {
              loop: true,
              autoplay: {
                delay: 2000
              },
              pagination: {
                el: '.swiper-pagination',
                clickable: true
              }
            })
            // console.log(res.data.data.pageData.items[3].data)

            this.typeface = res.data.data.pageData.items[2].params.text
            this.listApp = res.data.data.pageData.items[3].data
            this.picture = res.data.data.pageData.items[4].data[0].imgUrl
            // console.log(res.data.data.pageData.items[5].params.content)
            this.love = res.data.data.pageData.items[5].params.content
            console.log(res.data.data.pageData.items[6].data)
            this.allList = res.data.data.pageData.items[6].data
            console.log(this.allList)
          }
        }
      })
    </script>
  </body>
</html>
